<template>
  <section>
    <van-nav-bar title="添加好友"
                 fixed
                 placeholder
                 left-text="返回"
                 left-arrow
                 @click-left="onClickLeft"
                 safe-area-inset-top/>
  </section>

  <van-overlay :show="show">
    <div class="wrapper">
      <van-loading size="50px">加载中...</van-loading>
    </div>

  </van-overlay>

  <section>
    <van-search placeholder="请输入需要添加的用户名" v-model="userName" show-action>
      <template #action>
        <div @click="onClickButton">搜索</div>
      </template>
    </van-search>
  </section>

  <section>
    <van-cell-group v-if="searchFriend">
      <van-cell center
                :title="searchFriend.friendUserId"
                :label="searchFriend.friendUserName" >
        <template #value>
          <span v-if="!searchFriend.friendStatus" @click="doAddFriend(searchFriend)" style="color: green">{{searchFriend.friendStatusText}}</span>
          <span v-if="searchFriend.friendStatus" >{{searchFriend.friendStatusText}}</span>
        </template>
      </van-cell>
    </van-cell-group>
  </section>

</template>

<script setup>

import {ref} from "vue";
import {add, findByUserName} from "@/network/friend";
const userName = ref()
const searchFriend = ref()
const show = ref()

function onClickButton() {
  let params = {
    userName: userName.value,
  }

  findByUserName(params).then(res => {

    searchFriend.value = res.data;
  })
}
function doAddFriend(row) {
  show.value = true;
  let data = {
    friendUserId: row.friendUserId,
    friendUserName: row.friendUserName,
  }
  add(data).then(res => {
    if (res.code === 200) {
      onClickButton()
    }
  }).finally(e=>{
    show.value = false;
    console.log(e);
  })

}
function onClickLeft() {
  history.back();

}
</script>

<style scoped lang="scss">
.popup {

}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>
